<template>
	<view>
		<!-- <u-navbar :is-back="true" :is-fixed="true" title="涉农申报列表"></u-navbar> -->
		<view class="fixed-top bg-white">

			<view class="px-2 mt-2 pb-2 dfes">
				<u-search placeholder="请输入关键字 " height="60" border-color="#8ED0F2" search-icon-color="#8ED0F2"
					bg-color="#fff" v-model="searchStr" :action-style="actionStyle" @search="searchHandler"
					@custom="searchHandler" @clear="searchHandler"></u-search>

			</view>
			<u-gap height="20" bg-color="#f7f7f7"></u-gap>
		</view>
		<view class=" mt-12 pl-2 pr-2 pt-1">
			
            <view class="dfex u-line pb-2 mb-2 mt-3" v-for="(item, index) in dataList" :key="index"
            	@click="jump(item.id)">
            	<view>
            		<text class="text-333333 font-14">{{item.productName || '-'}}</text>
            		<view class="mt-2 lineHights font-12 text-999999">
            			<view class="wrapa">产品品类：{{ item.productTypeName || '-' }}</view>
            			<view class="wrapa">基地名称：{{ item.baseName || '-' }}</view>
            		</view>
            	</view>
            	<view class="bg-78AB06 pl-2 pr-2 py-1 rounded-circle font-12 text-white">查看详情</view>
            </view>
			
			<view v-if="!hasMore && dataList.length > 0" class="text-center mt-3 mb-3">
				<view class="text-muted">没有更多数据了</view>
			</view>
			<view v-else-if="!hasMore && dataList.length === 0" class="text-center mt-3 mb-3">
				<view class="text-muted">暂无数据</view>
			</view>
			<view v-else class="text-center mt-3 mb-3">
				<view class="btn btn-primary">加载更多</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $H from "@/common/free-lib/request.js";
	export default {
		data() {
			return {
				actionStyle: {
					color: '#8ED0F2'
				},
				form: {
					pageNo: 1,
					pageSize: 10,
					total: 0 // 总页数
				},
				tabs: [{
					title: '涉农主体列表',
					url: '/agriculture/seasonalProducts/visitor/list'
				}, {
					title: '可查看列表',
					url: '/brand/user/upper/viewableList'
				}],
				currentTab: 0,
				dataList: [],
				currentUrl: "/agriculture/seasonalProducts/visitor/list",
				searchStr: "",
                hasMore: true, // 是否还有更多数据
			}
		},
		computed: {

		},
		onLoad(options) {
			this.getAgricultureList();
		},
		onReachBottom() {
			this.form.pageNo++;
			this.getAgricultureList();
		},
		onPullDownRefresh() {
			this.form.pageNo = 1;
			this.dataList = [];
			this.getAgricultureList();
		},
		methods: {
		
			searchHandler() {
				this.form.pageNo = 1;
				this.dataList = []
				this.getAgricultureList();
			},
			jump(id) {
				uni.navigateTo({
					url: "/pages/touristMode/seasonal/seasonalDliest?id=" + id,
				});
			},
			
			//当季产品
			getAgricultureList() {
				uni.showLoading({
					title: '加载中'
				})
				$H.get(
					`/agriculture/seasonalProducts/visitor/list`, {...this.form,
							productName: this.searchStr}, {
						token: false
					}
				).then((res) => {
					uni.hideLoading()
					if (res.result.records.length == 0) {
						uni.showToast({
							title: "没有更多啦！",
							icon: "success",
						});
						return;
					}
					
					for (let i = 0; i < res.result.records.length; i++) {
						const item = res.result.records[i];
						if (item.agricultureLabel) {
							item.agricultureLabelArr = item.agricultureLabel.split(',');
						}
					}
					this.dataList.push(...res.result.records);
					this.form.total = res.result.total;
					this.hasMore = this.dataList.length < this.form.total;
					
				}).catch((error) => {
						uni.hideLoading()
						uni.stopPullDownRefresh();
						console.error("请求出错", error); // 处理任何错误
					});
			},
		}
	}
</script>

<style>
	.tab-item {
		font-size: 16px;
		cursor: pointer;
		position: relative;
	}

	.tab-item.active {
		font-size: 16px;
		color: #8ED0F2;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 2px;
		background-color: #8ED0F2;
	}
</style>